import React, { useState } from 'react'
import './set.less'
import { Popup ,NavBar} from 'react-vant'
export default function Set(props) {
    const [LogoutAlert, setLogoutAlert] = useState(false)
    return (
        <div className='Setbox'>
            <header>
                <NavBar
                    title="标题"
                    leftArrow
                    onClickLeft={() => {
                        props.history.go(-1)
                    }}
                />
            </header>
            <main>
                <div className='accountsCode'>
                    <div>
                        <div className='FontSize'>
                            微信号
                        </div>
                        <div className='RightFont'>
                            <span>
                                1269030073
                            </span>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#icon-arrow-right"></use>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div>
                        <div className='FontSize'>
                            手机号
                        </div>
                        <div className='RightFont'>
                            <span>
                                13269211073
                            </span>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#icon-arrow-right"></use>
                                </svg>
                            </span>
                        </div>
                    </div>
                </div>
                <div className='cipher'>
                    <div>
                        <div className='FontSize'>
                            微信密码
                        </div>
                        <div className='RightFont'>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#icon-arrow-right"></use>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div>
                        <div className='FontSize'>
                            声音锁
                        </div>
                        <div className='RightFont'>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#icon-arrow-right"></use>
                                </svg>
                            </span>
                        </div>
                    </div>
                </div>
                <div className='setTing'>
                    <div>
                        <div className='FontSize'>
                            应急联系人
                        </div>
                        <div className='RightFont'>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#icon-arrow-right"></use>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div>
                        <div className='FontSize'>
                            登陆过的设备
                        </div>
                        <div className='RightFont'>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#icon-arrow-right"></use>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div>
                        <div className='FontSize'>
                            更多安全设置
                        </div>
                        <div className='RightFont'>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#icon-arrow-right"></use>
                                </svg>
                            </span>
                        </div>
                    </div>
                </div>
                <div className='Logout' onClick={() => {
                    setLogoutAlert(true)
                }}>
                    退出
                </div>
            </main>
            <div className='aa'>
                <Popup visible={LogoutAlert}
                    round
                    position="bottom"
                    onClickOverlay={() => {
                        setLogoutAlert(false)
                    }}>
                    <div className='Logoutbox'>
                        <div className='Logtop'>
                            <div onClick={()=>{
                                setLogoutAlert(false)
                                localStorage.removeItem('token');
                                props.history.push('login')
                            }}>                              
                                退出登录                              
                            </div>
                            <div onClick={() => {
                                setLogoutAlert(false)
                            }}>
                                关闭微信
                            </div>
                        </div>
                        <div className='LogBot' onClick={() => {
                            setLogoutAlert(false)
                        }}>
                            取消
                        </div>
                    </div>
                </Popup>
            </div>
        </div>
    )
}
